<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html>

<head>
    <base href="${ctx}/">
    <script type="text/javascript">
        var pageNo = parseInt("${pageNo}"); //当前页
        var pages = parseInt("${pages}");   //总页数
        var pageSize = parseInt("${pageSize}"); //页面大小
        var ctx = "${ctx}";
        var error = "${error}";
    </script>

    <meta charset="utf-8"/>
    <title>学生列表</title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/manage/css/style.css"/>
    <link rel="stylesheet" type="text/css"
          href="https://cdn.bootcss.com/twitter-bootstrap/4.2.1/css/bootstrap.min.css"/>
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script src="${pageContext.request.contextPath}/js/manage/js/jquery-3.3.1.min.js.js"></script>
    <script src="${pageContext.request.contextPath}/js/manage/js/bootstrap.min.js" type="text/javascript"
            charset="utf-8"></script>
    <script src="${pageContext.request.contextPath}/js/manage/js/bootbox.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/manage/js/mejs.js"></script>
    <script src="${pageContext.request.contextPath}/js/manage/js/manage.js"></script>



    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background: url(${pageContext.request.contextPath}/images/image/backgroud1.jpg) no-repeat;
            background-size: cover;
        }

        .box {
            width: 1500px;
            height: 800px;
            background: rgba(0, 0, 0, 0.5);
            /*text-align: center;*/
            margin-top: 4%;
        }

        .box .left a {
            display: block;
            width: 200px;
            height: 90px;
            background: rgba(0, 0, 0, 0.2);
            font-size: 20px;
            color: #fff;
            text-decoration: none;
            padding-left: 30px;
            line-height: 90px;
        }

        .box .left a:hover {
            background-color: #ff6700;
        }

        .left {
            float: left;
            width: 230px;
            height: 540px;
            background-color: cadetblue;
            background: rgba(0, 0, 0, 0.2);
        }

        .right {
            float: right;
            width: 970px;
            height: 540px;
            background-color: rgba(152, 233, 233, 0.2);;

        }

        .right > div {
            float: left;
            width: 470px;
            height: 540px;
            background: rgba(0, 0, 0, 0.2);
            margin-left: 14px;
            margin-bottom: 14px;
        }

        .right .one {
            background-color: rgba(152, 233, 233, 0.2);
        }

        .right .photo {
            width: 490px;
            height: 540px;
        }

        .right .one h1 {
            color: white;
            font-size: 60px;
        }

        .right .one p {
            font-size: 40px;
            font-weight: 500;
            color: rgb(148, 241, 248);
            font-style: italic;
        }

        .pager-wrapper {
            margin-top: 10px;
            text-align: right;
        }

        .pager {
            display: inline-block;
            list-style-type: none;
            margin: 0;
            padding: 0;
            vertical-align: middle;
        }

        .pager::after {
            display: block;
            clear: both;
            content: "";
            width: 0;
        }

        .pager > li {
            float: left;
            border: 1px solid #ccc;
            padding: 5px 15px;
            border-left: none;
        }

        .pager > li:first-child {
            border-left: 1px solid #ccc;
        }

        .pager-wrapper > span {
            border: 1px solid #000000;
            padding: 5px 15px;
            vertical-align: middle;
            background-color: #fefefe;
        }

        .pager-wrapper a {
            text-decoration: none;
        }

        .pager > li.current {
            background-color: #FFCCCC;
        }

    </style>
</head>

<body>
<div class="box">
    <div class="title">学 生 管 理 系 统</div>

    <div class="content">
        <!--搜索输入框及查询、重置按钮-->
        <div class="container content_width">
            <div class="person_search">
                <form action="manage" method="post">
                    <div class="search_input">
                        <%--<div class="input-group mb-3">
                            <span>姓名：</span>
                            <input id="Ktext" type="text" class="form-control" placeholder="请输入姓名">
                        </div>--%>

                        <label for="name">&nbsp;&nbsp;&nbsp;姓名：</label> <input id="name" type="text" name="name" autocomplete="off"
                                                             value="${searchBean.name }">
                        <label for="stuId">学号：</label> <input id="stuId" type="text" name="stuId" autocomplete="off"
                                                              value="${searchBean.stuId}">
                        <label for="phone">电话：</label> <input id="phone" type="text" name="phone" autocomplete="off"
                                                              value="${searchBean.phone}">
                        <label for="email">邮箱：</label> <input id="email" type="text" name="email" autocomplete="off"
                                                              value="${searchBean.email }">

                        <%--<div class="input-group mb-3">
                            <span>学号：</span>
                            <input id="job_num" type="text" class="form-control" placeholder="请输入学号">
                        </div>--%>
                    </div>

                    <div class="search_input">
                        <button class="btn btn-primary search_btn" type="submit" id="search_btn">查询</button>
                        <button class="btn btn-primary search_btn" type="button" id="delete_btn">删除</button>
                        <button class="btn btn-primary search_btn" type="button" id="editBtn">修改</button>
                        <%--                    <button class="btn btn-primary search_btn" id="addBtn" type="button">添加</button>--%>
                        <%--<a href="delete" target="_self">
                             <button class="btn btn-primary search_btn" type="button" >删除</button>
                             </a>--%>
                        <%--<button class="btn btn-primary search_btn" type="button" formmethod="post">
                            <a  href="delete">删除</a>
                        </button>--%>
                        <%--<button class="btn btn-primary search_btn" type="button" id="back_btn">修改</button>--%>
                    </div>
                    <input name="pageNo" type="hidden" value="${pageNo}"/> <input name="pageSize" type="hidden"
                                                                                   value="${pageSize}"/>
                </form>
            </div>
            <div class="line"></div>
        </div>

        <!--添加按钮及bootstrap的模态框-->
        <div class="export">
            <button id="addBtn" type="button" class="btn btn-primary btn-sm" >
                <img src="${pageContext.request.contextPath}/images/manage/img/add_two.png"/>
                <span>添加</span>
            </button>
        </div>


        <div class="data">
            <!--表格列表-->
            <table id="tb" class="table" cellpadding="0" cellspacing="0">
                <thead>
                <tr>
                    <th><input type="checkbox" id="checkAll"></th>
                    <th>序号</th>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>出生日期</th>
                    <th>电话</th>
                    <th>E-Mail</th>
                </tr>
                </thead>

                <tbody id="show_tbody">

                <c:forEach items="${students}" var="stu">

                    <tr>
                        <td><input type="checkbox" value="${stu.id}"/></td>
                        <td>${stu.id}</td>
                        <td>${stu.stuId}</td>
                        <td>${stu.name }</td>
                        <td>${stu.sex }</td>
                        <td><fmt:formatDate pattern="yyyy-MM-dd" value="${stu.birthday}"/></td>
                        <td>${stu.phone }</td>
                        <td>${stu.email }</td>

                    </tr>
                </c:forEach>

                </tbody>
            </table>
        </div>
    </div>
    <div class="pager-wrapper">
        <span>总记录数：${total}/总页数：${pages}</span>
        <span><a href="javascript:void(0)">首页</a></span>
        <span><a href="javascript:void(0)">上一页</a></span>
        <ul class="pager">
            <c:forEach begin="${pageStart }" end="${pageEnd}" var="p">
                <c:choose>
                    <c:when test="${p == pageNo}">
                        <li class="current"><a href="javascript:void(0)">${p }</a></li>
                    </c:when>
                    <c:otherwise>
                        <li><a href="javascript:void(0)">${p }</a></li>
                    </c:otherwise>
                </c:choose>
            </c:forEach>
        </ul>
        <span><a href="javascript:void(0)">下一页</a></span>
        <span><a href="javascript:void(0)">尾页</a></span>
    </div>


</div>

</body>
</html>
